Custom Semi Transparent Menu

Teman-teman, sore ini saya pengen sharing trik untuk bikin custom menu. Ada dua trik utama yang akan saya ceritakan.

1. Membuat custom menu
2. Membuat pop-up screen yang semi transparan

Nanti, hasilnya kira-kira begini teman-teman:

Untuk membuat menu yang seperti ini, yang saya lakukan sebelumnya adalah membuat 2 class penunjang dulu. Sebenarnya class ini sudah sering saya pakai untuk kerjaan-kerjaan sebelumnya.

Class pertama adalah ImageUtil.java yang dipake untuk men-resize gambar-gambar yang saya pake. Class kedua adalah ImageButton.java. ImageButton dipake buat bikin tombol dengan 2 image yaitu image ketika tombol tidak di-focus dan image ketika tombol di-focus.

Selain kedua class itu, saya menyiapkan 3 icon downloadan yang akan saya pake buat tombol-nya. Icon yang saya pake adalah facebook, yahoo dan wordpress. Ketiga icon tersebut kemudian saya buat versi grey-nya, untuk dipakai sebagai image un-focus.

Ya, Anda sih bisa pakai image apa saja.

Ok, langsung saja saya share code aplikasi-nya. Saya kasih nama TestApp.java. Ini adalah entry point aplikasi sederhananya.

package kek.apa;

import kek.apa.ui.MenuTransparan;

import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.component.RichTextField;
import net.rim.device.api.ui.container.MainScreen;

public class TestApp extends UiApplication {
	public TestApp() {
		MainScreen main = new MainScreen() {
			private boolean showMenu = false;

			public boolean keyDown(int keycode, int time) {
				// ingat ini angka sakti
				if (keycode == 268566528) { // tombol menu dipencet
						UiApplication.getUiApplication().pushScreen(
							new MenuTransparan()
						);
					return true;
				}
				return super.keyDown(keycode, time);

			}
		};
		main.add(new RichTextField("Lorem Ipsum is simply dummy text of the " +
			"printing and typesetting industry. Lorem Ipsum has been the " +
			"industry's standard dummy text ever since the 1500s, when an unknown " +
			"printer took a galley of type and scrambled it to make a type " +
			"specimen book.\n\n" +
			"It has survived not only five centuries, but also " +
			"the leap into electronic typesetting, remaining essentially " +
			"unchanged. It was popularised in the 1960s with the release of " +
			"Letraset sheets containing Lorem Ipsum passages, and more recently " +
			"with desktop publishing software like Aldus PageMaker including " +
			"versions of Lorem Ipsum."));

		pushScreen(main);
	}

	public static void main(String[] args) {
		new TestApp().enterEventDispatcher();
	}
}

Di class di atas ada class lain yang dipakai, yaitu MenuTransparan.java. Source codenya sebagai berikut:

package kek.apa.ui;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.PopupScreen;

public class MenuTransparan extends PopupScreen {
	public static final int HEIGHT = 40,
		POSX = 0, POSY = Display.getHeight() - HEIGHT;
	private Bitmap bg;

	public MenuTransparan() {
		super(new HorizontalFieldManager(NO_HORIZONTAL_SCROLL) {
			public int getPreferredWidth() {
				return getScreen().getPreferredWidth();
			}
			public int getPreferredHeight() {
				return getScreen().getPreferredHeight();
			}
			public void sublayout(int maxWidth, int maxHeight) {
				super.sublayout(maxWidth, maxHeight);
		        setExtent( getPreferredWidth(), getPreferredHeight() );
			}
		});

		// ngambil snapshot dari bagian bawah screen
		bg = new Bitmap(getScreen().getPreferredWidth(),
				getScreen().getPreferredHeight());
		Display.screenshot(bg, POSX, POSY, getScreen().getPreferredWidth(),
				getScreen().getPreferredHeight());

		// manager ini untuk naruh tombol2-nya
		HorizontalFieldManager h = new HorizontalFieldManager(HORIZONTAL_SCROLL) {
			public int getPreferredWidth() {
				return getScreen().getPreferredWidth();
			}
			public int getPreferredHeight() {
				return getScreen().getPreferredHeight();
			}
			public void sublayout(int maxWidth, int maxHeight) {
				super.sublayout(maxWidth, maxHeight);
		        setExtent( getPreferredWidth(), getPreferredHeight() );
			}
			public void paintBackground(Graphics g) {
				int oldColor = g.getColor();
				int alpha = g.getGlobalAlpha();

				// kasih background yang diambil dari snapshot
				g.drawBitmap(0, 0, getPreferredWidth(), getPreferredHeight(),
					bg, 0, 0);

				// baru diatasnya dikasih warna semi transparan
				g.setGlobalAlpha(0x88);
				g.setColor(0x000000);
				g.fillRect(0, 0, getPreferredWidth(), getPreferredHeight());

				g.setGlobalAlpha(alpha);
				g.setColor(oldColor);
			}
		};

		// tambahin ImageButton untuk bikin tombol manis pake gambar
		h.add(new ImageButton(
			Bitmap.getBitmapResource("img/general/facebook.png"),
			Bitmap.getBitmapResource("img/focus/facebook.png")
		) {
			public void doAction() {
				Dialog.alert("Arep fesbukan?");
			}
		});
		h.add(new ImageButton(
				Bitmap.getBitmapResource("img/general/yahoo.png"),
				Bitmap.getBitmapResource("img/focus/yahoo.png")
			) {
				public void doAction() {
					Dialog.alert("YM-an yuuuuk");
				}
			});
		h.add(new ImageButton(
				Bitmap.getBitmapResource("img/general/wordpress.png"),
				Bitmap.getBitmapResource("img/focus/wordpress.png")
			) {
				public void doAction() {
					Dialog.alert("Wordpress");
				}
			});
		add(h);

	}

	public int getPreferredWidth() {
		return Display.getWidth();
	}

	public int getPreferredHeight() {
		return HEIGHT;
	}

	public void sublayout(int maxWidth, int maxHeight) {
		super.sublayout(maxWidth, maxHeight);
		setPosition(POSX, POSY); // naruh nih pop up 40 pixel dari dasar screen
        setExtent( getPreferredWidth(), getPreferredHeight() );
	}

	/**
	 * Ini biar kalo dipencet tombol escape, screen ini closed.
	 */
	public boolean keyDown(int keycode, int time) {
		if (keycode == 1769472) { // escape dipencet
			close();
			return true;
		}
		invalidate();
		return super.keyDown(keycode, time);
	}

	/**
	 * Buat ngilangin border.
	 */
	protected void applyTheme() {
	}

}

Gimana? Manteb nggak? Biasa? Nggak lah, nggak biasa.

Ini saya nggak perlu jelasin line by line ya. Kan udah saya kasih comment tuh. Mayan jelas kan. Nah, kalau Anda run di simulator program itu. Anda pencet tombol menu, maka akan muncul custom menu-nya. Untuk menutup custom menu, pencet tombol Escape, sebelah kanan convenient button. Gitu cara kerjanya. Menggantikan menu default Blackberry.

Kalau ada yang mau tanya, langsung comment aja, OK?